<template>
    <div class="common-layout">
        <el-container class="index-con">
            <el-aside class="index-aside" style="width: 240px;">
                <el-menu default-active="/ex/feedback" class="side-menu" router
                    :background-color="isNightMode ? '#1a1a1a' : '#f5f7fa'"
                    :text-color="isNightMode ? '#e0e0e0' : '#2c3e50'" :active-text-color="'#409EFF'"
                    style="height: 100%;">
                    <div class="system-title">
                        <span class="title-text">NERV</span>
                        <div class="title-decoration"></div>
                    </div>
                    <el-menu-item class="create-exam-item">
                        <el-button type="primary" class="create-exam-btn" @click="goToCreateExam">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            创建考试
                        </el-button>
                    </el-menu-item>
                    <el-menu-item index="/exam" class="menu-item">
                        <el-icon>
                            <Expand />
                        </el-icon>
                        <span>考试管理</span>
                    </el-menu-item>
                    <el-menu-item index="/ex/mark-exam" class="menu-item">
                        <el-icon>
                            <School />
                        </el-icon>
                        <span>人工评卷</span>
                    </el-menu-item>
                    <el-sub-menu class="menu-item" :index="'/analysis'" @click="handleAnalysisClick">
                        <template #title>
                            <el-icon>
                                <DataAnalysis />
                            </el-icon>
                            <span>分析</span>
                        </template>
                        <el-menu-item index="/ex/text-socre" class="submenu-item">
                            <el-icon>
                                <Histogram />
                            </el-icon>
                            <span>考试成绩</span>
                        </el-menu-item>
                        <el-menu-item index="/ex/miss-exam" class="submenu-item">
                            <el-icon>
                                <CloseBold />
                            </el-icon>
                            <span>统计1</span>
                        </el-menu-item>
                    
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="main-header">
                    <Header default-active="/exam" />
                </el-header>
                <el-main>
                    <div class="feedback-content">
                        <div class="search-bar">
                            <div class="left-section">
                                
                            </div>
                            <!-- <div class="right-section">
                                <el-button class="export-btn" :size="size">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    导出数据
                                </el-button>
                            </div> -->
                        </div>

                        <div class="table-section">
                            <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
                                background: '#f8faff',
                                color: '#2c3e50',
                                fontWeight: '600',
                                fontSize: '14px'
                            }" :cell-style="{
                                    fontSize: '14px',
                                    padding: '12px 0'
                                }">
                                <el-table-column prop="name" label="名称" min-width="180">
                                    <template #default="scope">
                                        <span class="exam-name">{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score" label="分数" width="100" align="center" />
                                <el-table-column prop="startEndTime" label="开始时间/结束时间" width="200" align="center" />
                                <el-table-column prop="examType" label="考试类型" width="120" align="center">
                                    <template #default="scope">
                                        <el-tag>{{ scope.row.examType }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="120" align="center" fixed="right">
                                    <template #default="scope">
                                        <el-button type="primary" link class="detail-btn"
                                            @click="handleDetail(scope.row)">
                                            查看详情
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="pagination">
                                <span class="page-text">共 {{ total }} 条记录</span>
                                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                    :page-sizes="[10, 20, 30, 50]" layout="sizes, prev, pager, next" :total="total"
                                    @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Plus, DataAnalysis, Histogram, School, Expand, CloseBold, FolderChecked, Refresh, User, Check, Star, Search, Download } from '@element-plus/icons-vue';
import Header from '@/components/Header.vue';
import { useRouter } from 'vue-router';
import { useTheme } from '@/stores/themeStore';
import { ElMessageBox } from 'element-plus';

const router = useRouter();
const themeStore = useTheme();
const isNightMode = computed(() => themeStore.isNightMode);
const goToCreateExam = () => {
    router.push({ name: 'CreateExam' });
};

const isAnalysisExpanded = ref(false);
const handleAnalysisClick = () => {
    isAnalysisExpanded.value = !isAnalysisExpanded.value;
};

const searchText = ref('');
const startTime = ref('');
const endTime = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(1);
const size = ref('large');

const tableData = ref([
    {
        name: '高等数学2',
        score: '100',
        startEndTime: '2025-03-17 20:18 - 2025-03-24 20:18',
        examType: '不限时考试'
    }
]);

const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
};

const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
};

const dialogVisible = ref(false);
const activeTab = ref('feedback');
const currentExam = ref({
    name: '高等数学2'
});

// 过滤相关数据
const examStatus = ref('');
const examGrade = ref('');
const dateFilter = ref('today');
const departmentFilter = ref('');

// 反馈相关数据
const feedbackData = ref([
    {
        content: '出题时上传附件人工复查',
        type: '其它问题',
        time: '2025-03-17 20:51:54',
        user: '小帅'
    }
]);

const feedbackTotal = ref(1);
const feedbackCurrentPage = ref(1);
const feedbackPageSize = ref(10);

const handleFeedbackSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
};

const handleFeedbackCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
};

const handleClose = () => {
    ElMessageBox.confirm('确认关闭？')
        .then(() => {
            dialogVisible.value = false;
        })
        .catch(() => { });
};

const handleDetail = (row) => {
    currentExam.value = {
        name: row.name
    };
    dialogVisible.value = true;
};

</script>

<style scoped>
.index-con {
    width: 100vw;
    height: 100vh;
    background-color: var(--el-bg-color);
}

.index-aside {
    background-color: var(--el-menu-bg-color);
    border-right: 1px solid var(--el-border-color-lighter);
    transition: all 0.3s ease;
}

.system-title {
    padding: 20px;
    text-align: center;
    position: relative;
}

.title-text {
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.title-decoration {
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #409EFF, transparent);
    margin: 10px auto 0;
}

.create-exam-item {
    padding: 20px !important;
    margin: 0 !important;
    height: auto !important;
}

.create-exam-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.create-exam-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.menu-item {
    margin: 4px 0;
    border-radius: 4px;
}

.submenu-item {
    padding-left: 54px !important;
}

.main-header {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.index-main {
    padding: 20px;
    background-color: var(--el-bg-color-page);
}

.search-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.status-select,
.category-select {
    width: 160px;
}

.search-input {
    width: 300px;
}

.table-section {
    background: var(--el-bg-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.miss-exam-content {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 60px);
    transition: all 0.3s ease;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.left-section {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.search-input {
    display: flex;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.time-input {
    width: 160px !important;
}

.search-text {
    width: 200px !important;
}

.create-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #409EFF, #36d1dc);
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.export-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 12px 24px;
    border: 1px solid #dcdfe6;
    color: #606266;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.table-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.exam-name {
    color: #409EFF;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.exam-name:hover {
    color: #66b1ff;
    background-color: #ecf5ff;
}

.detail-btn {
    font-size: 14px;
    padding: 4px 0;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

.page-text {
    color: #606266;
    font-size: 14px;
}

:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0 8px;
}

:deep(.el-date-editor .el-input__wrapper) {
    padding-left: 30px;
}

:deep(.el-input__inner) {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
}

:deep(.el-date-editor.el-input) {
    --el-date-editor-width: 160px;
}

.exam-detail-dialog {
    --el-dialog-padding-primary: 0;
    display: flex;
}

:deep(.el-dialog) {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    width: 95% !important;
}

:deep(.el-dialog__body) {
    flex: 1;
    overflow: auto;
    padding: 0;
}

:deep(.el-dialog__header) {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    background-color: #fff;
}

:deep(.el-dialog__title) {
    font-size: 16px;
    font-weight: 600;
}

.exam-tabs {
    padding: 0;
}

:deep(.el-tabs) {
    background: #fff;
}

:deep(.el-tabs__header) {
    margin: 0;
    padding: 0;
}

:deep(.el-tabs__nav-wrap) {
    padding: 0 20px;
    background-color: #fff;
}

:deep(.el-tabs__item) {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 20px;
}

:deep(.el-tabs__item.is-active) {
    font-weight: 600;
    color: #409EFF;
}

:deep(.el-tabs__active-bar) {
    background-color: #409EFF;
    height: 3px;
}

.manual-grading {
    padding: 20px;
}

.filter-bar {
    background-color: #f5f7fa;
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.filter-items {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select {
    width: 120px;
}

.date-filters {
    display: flex;
    gap: 8px;

    .el-button {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        border: 1px solid #dcdfe6;
        background: white;
        color: #606266;

        &.active {
            background-color: #409EFF;
            color: white;
            border-color: #409EFF;
        }

        &:hover:not(.active) {
            color: #409EFF;
            border-color: #409EFF;
            background-color: #ecf5ff;
        }
    }
}

.search-input {
    width: 200px;
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
}

.refresh-btn {
    padding: 8px;
    border: 1px solid #dcdfe6;
    color: #606266;

    &:hover {
        color: #409EFF;
        border-color: #409EFF;
        background-color: #ecf5ff;
    }
}

</style>